<!DOCTYPE HTML>
<html lang="en-US" >
    
    <head>
        
        <meta charset="UTF-8">
        <title>不同网络类型的最佳实践 | 前端性能优化</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 1.0.3">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
        
    
    
    
    <link rel="next" href="./configure-nginx-combo-with-http-request.html" />
    
    
    <link rel="prev" href="./ondemand-resource-loading.html" />
    

        
    </head>
    <body>
        
        
<link rel="stylesheet" href="gitbook/style.css">


        
    <div class="book"  data-level="6" data-basepath="." data-revision="1510986466881">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
    	
    	
    	

        

        
    
        
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="./index.html">
                        <i class="fa fa-check"></i>
                        
                         全栈视野的网页优化
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="1" data-path="common-optimization-indicator.html">
            
                
                    <a href="./common-optimization-indicator.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                         常用的性能优化指标
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="2" data-path="yahooperformancerules.html">
            
                
                    <a href="./yahooperformancerules.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                         依旧有效的雅虎优化法则
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="3" data-path="performance-optimization-tool-using-actual-combat.html">
            
                
                    <a href="./performance-optimization-tool-using-actual-combat.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                         性能优化工具实战
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="4" data-path="cache-http-protocol-header-field.html">
            
                
                    <a href="./cache-http-protocol-header-field.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                         HTTP缓存
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="5" data-path="ondemand-resource-loading.html">
            
                
                    <a href="./ondemand-resource-loading.html">
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                         按需加载资源
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter active" data-level="6" data-path="good-practices-for-the-different-network-types.html">
            
                
                    <a href="./good-practices-for-the-different-network-types.html">
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                         不同网络类型的最佳实践
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="7" data-path="configure-nginx-combo-with-http-request.html">
            
                
                    <a href="./configure-nginx-combo-with-http-request.html">
                        <i class="fa fa-check"></i>
                        
                            <b>7.</b>
                        
                         Nginx 配置 Combo 合并 HTTP 请求
                    </a>
                
            
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Published using GitBook</a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle font settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle share dropdown"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">Twitter</button>
                <button type="button" data-sharing="google-plus" class="button">Google</button>
                <button type="button" data-sharing="facebook" class="button">Facebook</button>
                <button type="button" data-sharing="weibo" class="button">Weibo</button>
                <button type="button" data-sharing="instapaper" class="button">Instapaper</button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
    
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="./" >前端性能优化</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-gitbook_153">
                    
                        <h2 id="">不同网络类型的优化实战</h2>
<h3 id="">获取网络类型</h3>
<p>　　web APIs　在 Navigator 接口中新增 connection 属性来获取网络状态。开发者可以通过 navigator.connection.type 获取网络类型，包括 unkown、Eherne、WIFI、2G、3G、none。理想情况下可以利用这个信息对资源进行优化，但这个 API 属于一个实验性质的属性，<a href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API" target="_blank">支持的浏览器的情况</a> 如图 13.6 所示:</p>
<p><img src="http://optimization.ivuex.tech/img/mobileBrowserCompatibilityOfNetwork_Information_API.png" alt="移动端　Network Information API　浏览器支持情况"></p>
<p><img src="http://optimization.ivuex.tech/img/desktopBrowserCompatibilityOfNetwork_Information_API.png" alt="PC端　Network Information API　浏览器支持情况"></p>
<p>　　可以看出大部分浏览器都不能很好地支持该属性，所以通常需要开发者主动考虑用户的弱网情，在代码层面上进行优化，或者通过混合开发模式在APP中通过接口获取用户的网络类型。</p>
<h3 id="62-">　6.2 弱网图片优</h3>
<p>　　图片通常是一个页面上最小号网络资源的内容，如今很多手机已经配上了高分辨率的屏幕，因此在实际开发中，开发者会使用高分辨率的图片缩放以保证清晰度。但这样做的同时也增大了图片资源的体积，所以通常在 Web 开发环境下使用两倍分辨率即可，在 APP 中甚至可以根据网络环境使用根据网络环境使用更低分辨率的图片。
　　在前端开发中，开发者会使用雪碧图来减少对资源的请求数量。这种方式正确与否要视体情况而定。将高分辨率图片整合成一张雪碧图是不合理的，因为这样的图片会需要很长的加载时间，从而影响用户体验。正确的做法是仅将小图标整合到雪碧图，并控制每张雪碧图的体积，如果超过了上线，则整合第二张雪碧图。在雪碧图合成重要使用合理的排放策略，甚至手动合成，比便有一些图标在合成过程中产生大量留白，造成资源的浪费。</p>
<blockquote>
<p><em>说明：</em>　雪碧图，即 CSS Sprite, 将页面中的图标或者背景图片合并到一张大图中，通过控制 CSS 的 background-position 属性确定图片呈现的位置。</p>
</blockquote>
<p>　　图片格式也是优化的重点。如果不需要透明图层，比如背景图，则避免使用 PNG 格式。打尺寸图片需要选择JPG格式，同时加一定的压缩比例，这样能够把体积件收到原来 PNG 格式的几分之一。 开发者还可以在 APP中使用 WebP 格式的图片，兼顾实现效果和体积。
　　另外还可以使用字体图标。比如，需要产生一定动画效果的图标至少需要两张图来实现，然而使用字体图标则可以通过 CSS来装饰。同理，一些简单的 GIF 动画，如 &quot;loading&quot; 效果图也可以使用原生 CSS 实现，不但减少了网络请求数量，同时还提升了性能。</p>
<h3 id="63">6.3　若罔缓存优化</h3>
<p>　　页面端的的数据请求也是一个对弱网命该的优化点，尤其在单一应用中，可能会同时拉去多个接口的数据。在一些 2G 网络下，页面会长时间处于加载数据的状态。遇到这种情况，卡法这可以选择在内存中缓存请求数据。例如，入口页为 A 页面，依赖数据源 a, 则可以在代码中定义一套缓存，示例代码如下:</p>
<pre><code>var store = {
    a: {
        url: &#39;&#39;, // 请求的地
        type: &#39;GET&#39;, //　请求的类型
        param: &#39;&#39;, //　请求的参数
        cache: {}, // 缓存请求的结果
    }
</code></pre><p>　　当首次访问 A 页面时，通过调用 store.a 获取对应 A 页面请求参数信息，在成功获取数据后进行数据缓存。当视图切换回到 A 页面时，先判断是否存在 store.a 对象的 cache 属，如果存在数据则读取并返回，不进行网络请求。此外，还可在应用中默认进行网络请求，设置请求的超时时间。在请求 complete 事件中，假设发生请求超时，则读取缓存数据渲染页面，部分实例代码如下:</p>
<pre><code>complete: function(XMLHttpRequest, status) {
    if (status == &#39;timeout&#39;) {
        var data = store.a;
        // 下面处理业务代码
    }
}
</code></pre><p>　　这种混存策略需要注意的是，如果存在其他修改当前缓存的可能，则需要在发出请求成功后的回调函数中保证缓存的更新。
　　除了内存中的缓存策略以外，HTML 5 还提供了 localStorage 作为客户端缓存方案，<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API" target="_blank">localStorage 在现代浏览器中基本都得到了支持</a>，如图 6.3.1 和 图 6.3.2 所示。</p>
<p><img src="http://optimization.ivuex.tech/img/mobileCompatibilityOfWeb_Storage_AP.png" alt="图 6.3.1　移动端　Web　Storage 浏览器至此情况"></p>
<p><img src="http://optimization.ivuex.tech/img/desktopCompatibilityOfWeb_Storage_AP.png" alt="图 6.3.1　桌面端　Web　Storage 浏览器至此情况"></p>
<blockquote>
<p><em>注意:</em>　localStorage 缓存数据的储存类型为字符串格式，所以在存储对象字面量时需要先通过 JSON.stringify 方法处理转换，在之后的使用中调用 JSON.parse 重新转换为原对象数据结构。</p>
</blockquote>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="./ondemand-resource-loading.html" class="navigation navigation-prev " aria-label="Previous page: 按需加载资源"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="./configure-nginx-combo-with-http-request.html" class="navigation navigation-next " aria-label="Next page: Nginx 配置 Combo 合并 HTTP 请求"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="gitbook/app.js"></script>

    
    <script src="https://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
